<template>
	<view class="u-wrap">
		<!-- 搜索 -->
		<view class="u-search-box">
			<view class="u-search-inner">
				<!-- @input="handleSearch" -->
				<input class="u-search-text" placeholder="搜索您想学习的技术栈" v-model="searchKeyword" />
				<image class="search-icon" src="@/static/search.png" @click="handleSearch" />
			</view>
		</view>
		<!-- 内容 -->
		<view class="u-menu-wrap">
			<!-- 左边内容 -->
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
					:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
					@tap.stop="swichMenu(index)">
					<text class="u-line-1">{{item.name}}</text>
				</view>
			</scroll-view>

			<!-- 右边的内容 -->
			<block v-for="(item,index) in tabbar" :key="index">
				<scroll-view scroll-y class="right-box" v-if="current==index">
					<view class="page-view">
						<view class="class-item">
							<view class="item-title">
								<text>{{item.name}}</text>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1"
									:style="{ transform: searchResultMap[item1.name] ? 'scale(1.2)' : 'scale(1)' }">
									<image class="item-menu-image" :src="item1.icon" mode=""></image>
									<view class="item-menu-name margin-top-sm">{{item1.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
	</view>
</template>

<script>
	import classifyData from "@/common/classify.data.js";
	export default {
		data() {
			return {
				// 分类数据
				tabbar: classifyData,
				// 左边菜单滚动条位置
				scrollTop: 0,
				// 当前选中的分类索引
				current: 0,
				// 左边菜单的高度
				menuHeight: 0,
				// 左边菜单项的高度
				menuItemHeight: 0,
				// 搜索关键词
				searchKeyword: '',
				// 搜索结果映射
				searchResultMap: {}
			}
		},
		computed: {

		},
		methods: {
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == this.current) return;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass, dataVal);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
						resolve();
					}).exec();
				})
			},
			/**
			 * 搜索方法
			 */
			// handleSearch() {
			// 	// 从当前组件实例中获取用户在搜索框输入的关键词，并去除首尾空格
			// 	const keyword = this.searchKeyword.trim();
			// 	// 检查处理后的关键词是否为空字符串
			// 	if (!keyword) {
			// 		// 如果关键词为空，清空搜索结果映射对象，即不显示任何放大效果
			// 		this.searchResultMap = {};
			// 		// 结束方法的执行
			// 		return;
			// 	}
			// 	// 初始化一个布尔变量，用于标记是否找到匹配的搜索结果
			// 	let found = false;
			// 	// 外层循环遍历 tabbar 数组，tabbar 数组包含多个分类对象
			// 	for (let i = 0; i < this.tabbar.length; i++) {
			// 		// 获取当前遍历到的分类对象
			// 		const category = this.tabbar[i];
			// 		// 内层循环遍历当前分类对象中的 foods 数组，foods 数组包含该分类下的多个子项
			// 		for (let j = 0; j < category.foods.length; j++) {
			// 			// 获取当前遍历到的子项
			// 			const item = category.foods[j];
			// 			// 检查当前子项的名称是否包含用户输入的关键词 item.name.includes(keyword)
			// 			if (item.name.includes(keyword)) {
			// 				// 如果找到匹配项，调用 swichMenu 方法将左侧菜单滚动到对应的分类索引位置
			// 				this.swichMenu(i);
			// 				// 清空搜索结果映射对象，确保只显示当前匹配项的放大效果
			// 				this.searchResultMap = {};
			// 				// 将当前匹配项的名称作为键，值设为 true，用于在模板中判断是否需要放大显示
			// 				this.searchResultMap[item.name] = true;
			// 				// 标记已找到匹配项
			// 				found = true;
			// 				// 跳出内层循环，不再继续遍历当前分类下的其他子项
			// 				break;
			// 			}
			// 		}
			// 		// 如果已经找到匹配项，跳出外层循环，不再继续遍历其他分类
			// 		if (found) break;
			// 	}
			// 	// 如果遍历完所有分类和子项后仍未找到匹配项
			// 	if (!found) {
			// 		// 调用 uni.showToast 方法显示一个提示框，提示用户未搜索到相关内容
			// 		uni.showToast({
			// 			title: '未搜索到',
			// 			icon: 'none'
			// 		});
			// 		// 清空搜索结果映射对象，确保不显示任何放大效果
			// 		this.searchResultMap = {};
			// 	}
			// },
			handleSearch() {
				const keyword = this.searchKeyword.trim();
				if (!keyword) {
					this.searchResultMap = {};
					return;
				}
				let found = false;
				for (let i = 0; i < this.tabbar.length; i++) {
					const category = this.tabbar[i];
					for (let j = 0; j < category.foods.length; j++) {
						const item = category.foods[j];
						if (item.name === keyword) {
							this.swichMenu(i);
							this.searchResultMap = {};
							this.searchResultMap[item.name] = true;
							found = true;
							break;
						}
					}
					if (found) break;
				}
				if (!found) {
					uni.showToast({
						title: '未搜索到',
						icon: 'none'
					});
					this.searchResultMap = {};
				}
			}
			/**
			 * 其他
			 */



		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		flex: 1;
		font-size: 26rpx;
		color: #909399;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid #2979ff;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 30rpx;
		color: #303133;
		font-weight: bold;
		margin: 10rpx 0;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: #303133;
	}

	.item-container {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		/* flex-wrap: wrap; */
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		transition: transform 0.3s ease;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
	}

	.search-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>